<template>
  <el-form class="drawer-multiColumn-form" :rules="props.validateRule" :model="props" ref="singleInputFormRef">
    <el-form-item prop="value">
      <el-input :model-value="value" @input="updateValue" :placeholder="props.placeholder ?? ''" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="SingleInputForm">
import { ref } from "vue";
import { FormInstance, FormRules } from "element-plus";

const emit = defineEmits<{
  "update:value": [value: string];
}>();

const updateValue = (value: string) => {
  emit("update:value", value);
};

interface Props {
  value: string | undefined;
  validateRule?: FormRules;
  placeholder?: string;
}

const props = withDefaults(defineProps<Props>(), {
  value: "",
  validateRule: undefined
});

const singleInputFormRef = ref<FormInstance>();

const validateForm = () => {
  console.log(props.validateRule);
  return singleInputFormRef.value?.validate();
};

defineExpose({
  validateForm
});
</script>
